<!-- 搜索 -->
<template>
	<view class="search-placeholder">
		<view class="search-fixed">
			<view class="search-box">
				<input class="search-input" type="text" placeholder="输入关键词" confirm-type="search" v-model="keyword"
					@confirm="handleSearch()" @focus="handleHideShowSelectPanel()"/>
				<button class="iconfont search-btn" @click="handleSearch()">&#xe600;</button>
				<button v-if="keyword" class="iconfont clear-btn" @click="handleClear()">&#xe603;</button>

				<view class="shop-type" @click="handleShowSelectPanel()">
					<text class="type">{{typeName}}</text>
					<text class="iconfont right-icon">&#xe61a;</text>
				</view>
			</view>

			<!-- 下拉选择 -->
			<view class="select-panel" v-if="isShowSelectPanel" @click="handleHideShowSelectPanel()">
				<view class="select">
					<view class="option border-bottom-1px" v-for="item in typeSelect" :key="item.value"
						:class="{'active': typeValue == item.value}" @click="handleChangeType(item)">{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';

	const keyword = ref('');
	const handleSearch = () => {

	}

	const handleClear = () => {
		keyword.value = ''
	}

	const typeSelect = ref([
		{ name: '找农资', value: '1' },
		{ name: '找飞防', value: '2' },
		{ name: '找专家', value: '3' },
		{ name: '找肥料', value: '4' },
	]);
	const typeValue = ref('1');

	const typeName = computed(() => {
		return typeSelect.value.find(item => item.value === typeValue.value).name;
	});

	const handleChangeType = (row) => {
		if (row.value === typeValue.value) return;
		typeValue.value = row.value;
		handleHideShowSelectPanel();
	}

	const isShowSelectPanel = ref(false);

	const handleShowSelectPanel = () => {
		isShowSelectPanel.value = !isShowSelectPanel.value;
	}
	
	const handleHideShowSelectPanel = () => {
		isShowSelectPanel.value = false;
	}
</script>

<style lang="scss" scoped>
	.search-placeholder {
		height: 122rpx;

		.search-fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			width: 100%;
			height: 122rpx;
			padding: 24rpx 30rpx;
			background-color: white;
			box-sizing: border-box;
		}
	}

	.search-box {
		flex-shrink: 0;
		position: relative;
		z-index: 2;

		.search-input {
			width: 100%;
			height: 74rpx;
			font-size: 28rpx;
			border-radius: 40rpx;
			background-color: #F2F1F2;
			padding: 0 244rpx 0 84rpx;
			box-sizing: border-box;

			&:active {
				background-color: #fafafa;
			}
		}

		.search-btn {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 84rpx;
			height: 74rpx;
			font-size: 40rpx;
			color: #CCCCCC;
			text-align: center;
			line-height: 74rpx;
			background-color: transparent;
		}

		.clear-btn {
			position: absolute;
			top: 0;
			right: 170rpx;
			z-index: 1;
			width: 74rpx;
			height: 74rpx;
			font-size: 36rpx;
			color: #CCCCCC;
			text-align: center;
			line-height: 74rpx;
			background-color: transparent;
		}

		.shop-type {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 170rpx;
			height: 74rpx;
			padding: 0 30rpx 0 20rpx;
			border-radius: 0 37rpx 37rpx 0;
			box-sizing: border-box;

			&:active {
				background-color: #e7e6e7;
			}

			&::before {
				position: absolute;
				left: 0;
				top: 10%;
				display: block;
				content: '';
				width: 1px;
				height: 80%;
				background-color: #c7c7c7;
				transform: scaleX(0.5)
			}

			.type {
				font-size: 28rpx;
				color: #222;
			}

			.right-icon {
				font-size: 22rpx;
				color: #222;
			}
		}
	}

	.select-panel {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);

		.select {
			position: absolute;
			top: 122rpx;
			right: 30rpx;
			background-color: white;
			border-radius: 10rpx;

			&::before {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%, -100%);
				display: block;
				content: '';
				border: 10rpx solid transparent;
				border-bottom-color: white;
			}

			.option {
				width: 200rpx;
				height: 80rpx;
				font-size: 28rpx;
				color: #222;
				text-align: center;
				line-height: 80rpx;

				&:last-child::after {
					display: none;
				}

				&:active {
					background-color: #fafafa;
				}

				&.active {
					color: #FE3333;
				}
			}
		}
	}
</style>